<template>
    <div
      class="header"
      v-show="showheader"
      :style="opacityStyle"
    >
        <router-link to="/">
            <span class="iconfont icon-zuojiantou"></span>
        </router-link>
        长恨歌
    </div>
</template>
<script>
    export default {
        name: "Heared",
        data(){
          return{
            showheader:false,
            opacityStyle:{
                opacity:0
            }
          }
        },
        methods:{
          handleScroll(){
            // console.log(document.documentElement.scrollTop)
            const  top = document.documentElement.scrollTop;//页面向上滚动的距离
            if( top > 60){//滚动高度大于60
                let opacity = top / 120 ; //计算透明度
                opacity > 1 ? 1 : opacity;   //最大不能超过1
                this.opacityStyle = {//重新赋值
                    opacity
                };
                this.showheader = true;
            }else {
              this.showheader = false;
            }
          }
        },
        mounted () {
          console.log(111);
          window.addEventListener('scroll',this.handleScroll)
        }
    }
</script>
<style scoped lang="stylus">
    .header{
      width :100%;
      background :#00bcd4;
      line-height :.4rem;
      color :white;
      position :fixed;
      top: .0;
      left :0;
      text-align :center;
      font-size :.16rem;
      z-index :1;
      span{
        position :absolute;
        left :.1rem;
        top:0;
        font-size :.18rem;
        color :white;
      }
    }
</style>
